<template>
  <div>
    <div class="card-group mb-3">
      <div v-for="(item, key) in userTasks" class="card card-hover" :key="key">
        <div class="card-body p-3">
          <span class="task-title" :class="item.isCurrentTask ? 'font-weight-bold' : ''">
            {{ item.title }}
          </span>
          <div class="text-muted mb-2">
            <div v-for="(subItem, subIndex) in item.subTitle" :key="subIndex">
              <span>{{ subItem.prefix }}</span>
              <span :class="subItem.css">{{ subItem.num }}</span>
            </div>
          </div>
          <div v-for="(list, serial) in item.list" class="mb-2" :key="serial">
            <router-link :to="list.url" class="task-link">
              <div class="d-flex justify-content-between">
                <small>
                  <span class="mr-3">{{ list.title }}</span>
                  <span>{{ list.num }}</span>
                </small>
                <small>{{ list.funds }} 万元</small>
              </div>
              <div class="progress-bar">
                <div
                  class="progress-bar-full"
                  :class="`bg-${list.bgColor}`"
                  :style="{ width: `${list.percent}%` }"
                ></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <h5 class="text-muted">{{ taskName }}</h5>

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  components: {},
  props: {},
  data() {
    return {
      jobArray: ['org_corp', 'business_manager'],
    }
  },
  computed: {
    ...mapGetters(['job', 'taskCount']),
    routeName() {
      return this.$route.name || ''
    },
    taskName() {
      const routes = this.$route.matched.slice(-2)
      return routes.map(item => item.meta.title).join('：')
    },
    tasks() {
      // 立项
      const cliamTotal = this.getNumAndPercent(
        this.taskCount.no_cliam_recommand_total,
        this.taskCount.no_cliam_total,
        this.taskCount.yes_cliam_total,
        this.taskCount.confuse_cliam_total
      )
      const cliamFunds = this.getNumAndPercent(
        this.taskCount.no_cliam_recommand_funds,
        this.taskCount.no_cliam_funds,
        this.taskCount.yes_cliam_funds,
        this.taskCount.confuse_cliam_funds
      )
      // 项目审批
      const investigateTotal = this.getNumAndPercent(
        this.taskCount.check_no_total,
        this.taskCount.check_yes_total,
        this.taskCount.check_no_ele_total,
        this.taskCount.check_yes_approval_total,
        this.taskCount.check_confuse_total
      )
      const investigateFunds = this.getNumAndPercent(
        this.taskCount.check_no_funds,
        this.taskCount.check_yes_funds,
        this.taskCount.check_no_ele_funds,
        this.taskCount.check_yes_approval_funds,
        this.taskCount.check_confuse_funds
      )

      // 签约放款
      const registerTotal = this.getNumAndPercent(
        this.taskCount.register_loan_no_total,
        this.taskCount.register_loan_yes_total,
        this.taskCount.register_loan_confuse_total
      )
      const registerFunds = this.getNumAndPercent(
        this.taskCount.register_loan_no_funds,
        this.taskCount.register_loan_yes_funds,
        this.taskCount.register_loan_confuse_funds
      )

      // 贷后管理
      const postloanTotal = this.getNumAndPercent(
        this.taskCount.load_beh_normal_total,
        this.taskCount.load_beh_complete_total,
        this.taskCount.load_beh_fail_total
      )
      const postloanFunds = this.getNumAndPercent(
        this.taskCount.load_beh_normal_funds,
        this.taskCount.load_beh_complete_funds,
        this.taskCount.load_beh_fail_funds
      )
      return [
        {
          title: '项目受理',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已收到项目：',
              num: cliamTotal.sum,
              css: '',
            },
          ],
          namePrefix: 'missionApprove',
          list: [
            {
              title: '推荐项目',
              num: cliamTotal.data[0].count,
              percent: cliamTotal.data[0].percent,
              funds: cliamFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'missionApproveRecommon' },
            },
            {
              title: '未受理',
              num: cliamTotal.data[1].count,
              percent: cliamTotal.data[1].percent,
              funds: cliamFunds.data[1].count,
              bgColor: 'warning',
              url: { name: 'missionApproveNo' },
            },
            {
              title: '已受理',
              num: cliamTotal.data[2].count,
              percent: cliamTotal.data[2].percent,
              funds: cliamFunds.data[2].count,
              bgColor: 'success',
              url: { name: 'missionApprovePass' },
            },
            {
              title: '已拒绝',
              num: cliamTotal.data[3].count,
              percent: cliamTotal.data[3].percent,
              funds: cliamFunds.data[2].count,
              bgColor: 'danger',
              url: { name: 'missionApproveRefuse' },
            },
          ],
        },
        {
          title: '项目审批',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已受理项目：',
              num: cliamTotal.data[2].count,
              css: '',
            },
          ],
          namePrefix: 'missionInvestiga',
          list: [
            {
              title: '未审批',
              num: investigateTotal.data[0].count,
              percent: investigateTotal.data[0].percent,
              funds: investigateFunds.data[0].count,
              bgColor: 'warning',
              url: { name: 'missionInvestigaNo' },
            },
            {
              title: '已审批',
              num: investigateTotal.data[1].count,
              percent: investigateTotal.data[1].percent,
              funds: investigateFunds.data[1].count,
              bgColor: 'info',
              url: { name: 'missionInvestigaYes' },
            },
            {
              title: '未回函',
              num: investigateTotal.data[2].count,
              percent: investigateTotal.data[2].percent,
              funds: investigateFunds.data[2].count,
              bgColor: 'primary',
              url: { name: 'missionInvestigaLetter' },
            },
            {
              title: '已通过',
              num: investigateTotal.data[3].count,
              percent: investigateTotal.data[3].percent,
              funds: investigateFunds.data[3].count,
              bgColor: 'success',
              url: { name: 'missionInvestigaPass' },
            },
            {
              title: '已拒绝',
              num: investigateTotal.data[4].count,
              percent: investigateTotal.data[4].percent,
              funds: investigateFunds.data[4].count,
              bgColor: 'danger',
              url: { name: 'missionInvestigaRefuse' },
            },
          ],
        },
        {
          title: '签约放款',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已通过项目：',
              num: investigateTotal.data[3].count,
              css: '',
            },
          ],
          namePrefix: 'missionRegister',
          list: [
            {
              title: '待放款',
              num: registerTotal.data[0].count,
              percent: registerTotal.data[0].percent,
              funds: registerFunds.data[0].count,
              bgColor: 'warning',
              url: { name: 'missionRegisterNo' },
            },
            {
              title: '已放款',
              num: registerTotal.data[1].count,
              percent: registerTotal.data[1].percent,
              funds: registerFunds.data[1].count,
              bgColor: 'success',
              url: { name: 'missionRegisterPass' },
            },
            {
              title: '已拒绝',
              num: registerTotal.data[2].count,
              percent: registerTotal.data[2].percent,
              funds: registerFunds.data[2].count,
              bgColor: 'danger',
              url: { name: 'missionRegisterRefuse' },
            },
          ],
        },
        {
          title: '贷后管理',
          job: this.jobArray,
          subTitle: [
            {
              prefix: '已放款项目：',
              num: registerTotal.data[1].count,
              css: '',
            },
          ],
          namePrefix: 'missionPostloan',
          list: [
            {
              title: '在保项目',
              num: postloanTotal.data[0].count,
              percent: postloanTotal.data[0].percent,
              funds: postloanFunds.data[0].count,
              bgColor: 'info',
              url: { name: 'missionPostloaning' },
            },
            {
              title: '解保项目',
              num: postloanTotal.data[1].count,
              percent: postloanTotal.data[1].percent,
              funds: postloanFunds.data[1].count,
              bgColor: 'warning',
              url: { name: 'missionPostloanFinish' },
            },
            {
              title: '异常项目',
              num: postloanTotal.data[2].count,
              percent: postloanTotal.data[2].percent,
              funds: postloanFunds.data[2].count,
              bgColor: 'success',
              url: { name: 'missionPostloanAbnormal' },
            },
          ],
        },
      ]
    },
    userTasks() {
      return this.tasks.filter(task => {
        const { namePrefix } = task
        task.isCurrentTask = this.routeName.includes(namePrefix)
        return true // !job || job.includes(this.job)
      })
    },
    userRouter() {
      return this.routeName && this.userTasks.length
        ? { name: this.routeName }
        : this.userTasks[0].list[0].url
    },
  },
  watch: {
    routeName(val) {
      if (!val) this.initTask()
    },
  },
  created() {
    this.$store.dispatch('getTaskCount')
    this.initTask()
  },
  mounted() {},
  methods: {
    initTask() {
      this.$router.replace(this.userRouter)
    },
    getNumAndPercent(...args) {
      const countArr = []
      let sum = 0
      for (let arg of args) {
        const count = this.getNumber(arg)
        sum += count
        countArr.push(count)
      }

      const data = []
      for (let i = 0; i < countArr.length; i++) {
        const count = countArr[i]
        data.push({
          count,
          percent: this.getPercent(count, sum),
        })
      }

      return { sum, data }
    },
    getNumber(str) {
      return +str || 0
    },
    getPercent(top, bottom) {
      return !bottom ? 0 : (top / bottom) * 100
    },
  },
}
</script>
<style lang="scss" scoped>
.task-title {
  color: #333;
  font-size: 1.25rem;

  &.active {
    font-weight: bold;
    color: $primary;
    color: var(--primary);
  }
}

.card-hover {
  transition: all 0.3s;
  &:hover {
    box-shadow: 0 2px 6px $gray-400;
  }
}

.task-link {
  color: $gray-600;
  &.exact-active {
    color: $primary;
    color: var(--primary);
  }
}
</style>
